
<template>
    <div class="box">
      <label for="id">
        <img :src="dataUrl">
        <!--<div id="imgEdit">-->
          <!--<img :src="imgEdit">-->
        <!--</div>-->
      </label>
      <input id="id" type="file" @change="handleFileChange" ref="inputer">
      <div>
        <p>name</p>
        <p>wangde@.qq.com</p>
      </div>
    </div>
</template>
<script>
  import edit from '../../assets/edit.png'
  export default{
    data () {
      return {
        // 转base64码后的data字段
        dataUrl: '',
//        imgEdit:edit
      }
    },
    mounted(){
        this.dataUrl = localStorage.dataText;
    },
    methods: {
    imgPreview (file) {
      let self = this;
      // 看支持不支持FileReader
      if (!file || !window.FileReader) return;

      if (/^image/.test(file.type)) {
        // 创建一个reader
        var reader = new FileReader();
        // 将图片将转成 base64 格式
        reader.readAsDataURL(file);
        // 读取成功后的回调
        reader.onloadend = function () {
          self.dataUrl = this.result;
        }
      }
    },
    handleFileChange (e) {
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据
      this.file    = inputDOM.files[0];
      this.file = inputDOM.files[0];
      this.errText = '';
      let size = Math.floor(this.file.size / 1024);
      if (size >1024) {
        // 这里可以加个文件大小控制
        return false
      }
      // 触发这个组件对象的input事件
      this.$emit('input', this.file);
      // 这里加个回调也是可以的
      this.onChange && this.onChange(this.file, inputDOM.value);
      // 在获取到文件对象进行预览就行了！
      this.imgPreview(this.file);
    }

  },
    watch:{
      dataUrl(newUrl){
          localStorage.dataText = newUrl;
      }
    }

  }
  </script>
<style scoped>
  .box{
    float: right;

  }
  .box div{
    text-align: center;
  }
  .box label{
    display: block;
    height: 180px;
    width: 180px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    margin: auto;
    position: relative;
    z-index: 1;
  }
  .box label img{
    border-radius: 50%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: block;
  }
  .box input{
    display: none;
  }
  /*#imgEdit{*/
    /*position: absolute;*/
    /*z-index: 100;*/
    /*right: 20px;*/
    /*bottom: 15px;*/
  /*}*/

</style>

